<template>
    <div class="cFunDetails">
        <navbars></navbars>
        <div class="card">
            <div class="card-content">
                <div class="card-item" v-for="(item,index) in json" :key="index" @click="fn_click(item)"> 
                    <div class="info">
                        <div class="info-title">{{item.title}}</div>
                        <div class="info-content">
                            <div class="left">
                                <van-tag color="#ee0a24" plain>普通</van-tag>
                                <span class="tag">专辑唱片</span>
                            </div>
                        </div>
                        <div class="imgbox">
                            <img :src=item.img alt="">
                        </div>
                        <div class="target">
                            <div class="left"><span>￥{{item.iteminfo.total}}</span> 目标金额</div>
                            <div class="right red">{{item.ranArr[0]}}%</div>
                        </div>
                        <van-progress pivot-text="" color="#ee0a24" :percentage=item.ranArr[0] />
                        <div class="info-count">
                            <div class="left"><span>￥{{item.ranArr[3]}}</span> 已筹</div>
                            <div class="middle"><span>{{item.ranArr[1]}}</span> 支持</div>
                            <div class="right"><span>{{item.ranArr[2]}}</span> 剩余</div>
                        </div>
                        <div class="info-direct">
                            项目结束后筹资未完成将全额退款
                        </div>
                    </div>
                    <div class="card-intr">
                        <div class="intr-person">
                            <div class="left">
                                <img :src="item.iteminfo.pm.img" alt="">
                            </div>
                            <div class="right">
                                <p>{{item.iteminfo.pm.name}}</p>
                                <p>项目发起人</p>
                            </div>
                        </div>
                        <div class="product-intr">
                            <p>项目介绍</p>
                            <div class="card-product">
                                <img v-for="(item1,index1) in item.iteminfo.intrimg" :key="index1" :src="item1" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        <bottombtn></bottombtn>
    </div>
</template>

<script>
import navbars from '../NavBars.vue'
import bottombtn from './bottombtn.vue'
export default {
    name : "cFunDetails",
    props: {

    },
    data() {
        return {
            json : [],
           
        };
    },
    computed: {

    },
    created() {
        this.json.push(this.$route.params.json)
        // console.log(this)
    },
    mounted() {

    },
    watch: {

    },
    methods: {

    },
    components: {
        navbars,
        bottombtn
    },
};
</script>

<style scoped lang="less">
.cFunDetails{
    width: 100%;
    height: auto;
    font-size: 16px;
    .card{
        width: 100%;
        height: auto;
        .card-content{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction:column;
            justify-content: center;
            align-items: center;          
            .card-item{
                width: 100%;
                height: auto;
                .imgbox{
                    width: 100%;
                    height: 4.8rem;
                    display: inline-block;
                    overflow: hidden;
                    position: relative;
                    box-sizing: border-box;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .info{
                    width: 100%;
                    height: auto;
                    padding: .4rem;
                    box-sizing: border-box;
                    .info-content{
                        width: 100%;
                        height: auto;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        box-sizing: border-box;
                        margin-top: 10px;
                        >div{
                            flex:1;
                        }
                        >div:nth-child(1){
                            .van-tag{
                                border-radius: 3px;
                                margin-right: 10px;
                            }
                            .tag{
                                font-size: 12px;
                                color: rgb(106, 106, 106);
                            }
                        }
                        >div:nth-child(2){
                            text-align: right;
                            font-size: 12px;
                            color: #eb484a;
                        }
                    }
                    .van-progress{
                        margin: 17px 0 15px 0;
                    }
                    .info-count,.target{
                        width: 100%;
                        height: auto;
                        padding-top: 5px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        div{
                            font-size: 11px;
                            color: rgb(106, 106, 106);
                            flex:1;
                            span{
                                display: inline-block;
                                color:#000;
                                font-size: 16px;
                            }
                        }
                        div:nth-child(2){
                            text-align: center;
                        }
                        div:last-child{
                            text-align: end;
                        }
                        div.red{
                            text-align: end;
                            font-size: 12px;
                            color: #eb484a;
                        }
                    }
                    .info-direct{
                        width: 100%;
                        height: auto;
                        padding: 10px 0;
                        font-size: 12px;
                        color: #eb484a;
                    }
                
                }
                .card-intr{
                    width: 100%;
                    height: auto;
                    .intr-person{
                        width: 100%;
                        box-sizing: border-box;
                        // height: ;
                        border-top: 7px #f8f8f8 solid;
                        border-bottom: 7px #f8f8f8 solid;
                        padding: .3rem;
                        position: relative;
                        display: flex;
                        align-items: center;
                        font-size: 11px;
                        color: #999;
                        .left{
                            width: 1.2rem;
                            height: 1.2rem;
                            border-radius: 6px;
                            overflow: hidden;
                            margin-right: .3rem;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .right{
                            p:first-child{
                                font-size: 14px;
                                color: #333;
                                margin-bottom: 5px;
                            }
                            p:last-child{
                                margin: 0;
                            }
                        }
                    }
                    .product-intr{
                        margin: .14rem 0 1.2rem 0;
                        padding: 0 .3rem .2rem .3rem;
                        p{
                            font-size: 15px;
                            padding: .3rem 0;
                            margin: 0;
                        }
                        .card-product{
                            word-break: break-all;
                            font-size: 14px;
                            color: #666;
                            width: 100%;
                            height: auto;
                            img{
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
